<template>
  <el-container style="height: 710px">
    <el-main>
      <el-form ref="formRef" :inline="true" :model="form" class="form" label-position="right" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="项目名称:" prop="programName">
              <el-input v-model="form.programName" style="width: 180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="启动时间:" prop="date">
              <el-date-picker
                  v-model="form.date"
                  format="YYYY/MM/DD"
                  placeholder="请选择日期"
                  style="width: 180px"
                  type="date"
                  value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 30px">
          <el-col :span="16">
          </el-col>
          <el-col :span="8">
            <el-button plain style="height: 40px;width: 100px;margin-right: 20px" type="info"
                       @click="resetForm(formRef)">重置
            </el-button>
            <el-button plain style="height: 40px;width: 100px;margin-right: 20px" type="primary" @click="queryForm">
              查询
            </el-button>
            <el-button plain style="height: 40px;width: 100px" type="primary" @click="NewConfig">新增项目</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableData.slice((form.currentPage-1)*form.pagesize , form.currentPage*form.pagesize)" border
                max-height="486" style="width: 100%">
        <el-table-column label="ID" prop="id" width="70"/>
        <el-table-column label="项目名称" prop="programName" width="150"/>
        <el-table-column label="负责人id" prop="responsiblePerson" width="100"/>
        <el-table-column label="负责人" prop="responsiblePersonName" width="150"/>
        <el-table-column label="项目启动日期" prop="startTime" width="150"/>
        <el-table-column label="当前人数" prop="numbers" width="210"/>
        <el-table-column label="项目周期" prop="programCycle" width="190"/>
        <el-table-column label="项目状态" prop="programStatus" width="230">
          <template #default="scope">
            <el-progress
                :color="customColors"
                :percentage="scope.row.programStatus"
                :stroke-width="24"
                :text-inside="true"
                status="success"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">配置</el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
          :current-page="form.currentPage"
          :total="tableData.length"
          background
          style="margin-top: 10px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import router from "@/router";
import type {FormInstance} from "element-plus";
import {deleteProgramApi, queryProgramApi} from "@/api/Program";
import {usePMConfig} from "@/stores/PMConfig";
import {getUserById} from "@/api/User";

const PMConfig = usePMConfig()
//新建项目
const NewConfig = () => {
  PMConfig.clearAll()
  router.push('/home/programmanagement/newconfig')
}
//定义进度条颜色
const customColors = [
  {color: '#ff0000', percentage: 10},
  {color: '#eebe77', percentage: 60},
  {color: '#529b2e', percentage: 100},
]

interface form {
  id: number
  programName: string
  responsiblePerson: string
  numbers: string
  programCycle: string
  programStatus: number
}

const form = reactive({
  date: '',
  pagesize: 10,
  currentPage: 1,
  id: '',
  programName: '',
  responsiblePerson: "",
  startTime: '',
  numbers: '',
  programCycle: '',
  programStatus: 0
})
const formRef = ref<FormInstance>()

//分页查询
const handleCurrentChange = (currentPage: number) => {
  form.currentPage = currentPage
}
const handleSizeChange = (size: number) => {
  form.pagesize = size
}
//配置----配置按钮
const handleEdit = (index: number, row: form) => {
  //编辑内容(配置)
  PMConfig.$patch({
    projectId: row.id,
    head: row.responsiblePerson,
    name: row.programName
  })
  router.push('/home/programmanagement/newconfig')
}


//查询(有参/空参)
const queryForm = () => {
  queryProgramApi(form.programName, form.date).then(res => {
    tableData.value = []
    for (let i = 0; i < res["data"].length; i++) {
      getUserById(res["data"][i].projectLeader).then(response => {
        tableData.value.push({
          id: res["data"][i].projectId,
          programName: res["data"][i].projectName,
          responsiblePerson: res["data"][i].projectLeader,
          responsiblePersonName: (response['data'] == null) ? "负责人不存在" : response['data'].userName,
          startTime: res["data"][i].projectStartTime.substring(0, 10),
          numbers: res["data"][i].projectNum + "人",
          programCycle: "共计" + res["data"][i].projectPeriod + "个月",
          programStatus: res["data"][i].projectProgress,
        })
      })
      // console.log(getId(res, i))
      // console.log(id)
    }
  })
}
//清空查询
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  //返回全部表格状态
}
//删除该条数据按钮---删除按钮
const handleDelete = (index: number, row: form) => {
  //将删除指令传给后端
  deleteProgramApi(row.id, 1).then(res => {
    if (res != null) tableData.value.splice(index, 1)
  })
}
//初始化表格
queryForm()


let tableData = ref([])
</script>

<style scoped>
.form {
  margin-top: 10px;
}

.el-row {
  height: 40px;
  margin-bottom: 0;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}
</style>